import React, { Component } from "react";
import Header from "../../components/header";
import { Tabs } from "antd";
import {
  EnvironmentOutlined,
  SearchOutlined,
  ShoppingCartOutlined,
} from "@ant-design/icons";
import "./index.css";
import { newPropleVip, seckillGoods, indexGoodsList } from "../../api/api";
const { TabPane } = Tabs;
export default class index extends Component {
  constructor() {
    super();
    this.state = {
      search: "",
      new_pop_good: [],
      sk_goods: [],
      li1: [],
      li4: [],
      li3: [],
      li2: [],
      hh: "",
      mm: "",
      ss: "",
    };
    this.t=null
  }
  onSearch() {}
  //时间补0
  add0(n) {
    if (n < 10) {
      n = "0" + n;
    }
    return n;
  }
  getTime() {
    let d = new Date();
    let ful = new Date(2021, 11, 27);
    let days = ful - d;
    //秒
    var ss = Math.floor((days / 1000) % 60);
    //分
    var mm = Math.floor((days / 1000 / 60) % 60);
    //小时
    var hh = Math.floor(days / 1000 / 60 / 60);
    ss = this.add0(ss);
    mm = this.add0(mm);
    hh = this.add0(hh);
    this.setState({
      hh,
      mm,
      ss,
    });
  }
  async componentDidMount() {
    let res = await newPropleVip();
    let res2 = await seckillGoods();
    let res3 = await indexGoodsList();
    this.setState({
      new_pop_good: [...res.data.list],
      sk_goods: [...res2.data.list],
      li1: [...res3.data.list[0].content],
      li2: [...res3.data.list[1].content],
      li3: [...res3.data.list[2].content],
      li4: [...res3.data.list[3].content],
    });
    console.log(this.state.li1);
    this.t=setInterval(() => {
      this.getTime();
    }, 1000);
  }
  componentWillUnmount(){
    clearInterval(this.t)
  }
  render() {
    return (
      <>
        <Header title="首页"></Header>
        <div className="header">
          <img src={require("../../assets/image/piclogowhite 2.png")} alt="" />
          <div className="search">
            <SearchOutlined />
            <input
              type="text"
              value={this.state.search}
              placeholder="搜索商品"
              onChange={(e) => {
                this.setState({ search: e.target.value });
              }}
            />
            <button>搜索</button>
          </div>
          <EnvironmentOutlined />
        </div>
        <div className="new_prople_vip">
          <div className="title clearfix">
            新人专享 <span>{this.state.hh}</span>:<span>{this.state.mm}</span>:
            <span>{this.state.ss}</span> <button>查看全部&gt;</button>
          </div>
          <div className="new_vip_goods">
            <div className="token_title">
              <button>1重礼</button>
              信任特价专区<span>（限量供应，先到先得）</span>
            </div>
            <div className="scro">
              <ul>
                {this.state.new_pop_good.map((item, index) => {
                  return (
                    <li key={index}>
                      <img src={this.$url + item.img} alt="" />
                      <div className="new_vip_price">
                        <div>
                          ￥{item.price}
                          <br />
                          <del>￥{item.market_price}</del>
                        </div>
                        <button>
                          <ShoppingCartOutlined />
                        </button>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
          <div className="token">
            <div className="token_title">
              <button>2重礼</button>
              信任特价专区<span>（限量供应，先到先得）</span>
            </div>
            <img src={require("../../assets/image/优惠券.png")} alt="" />
            <img src={require("../../assets/image/优惠券领取.png")} alt="" />
          </div>
        </div>
        <ul className="bar">
          <li>
            <img src={require("../../assets/image/seckill.png")} alt="" />
            <p>限时秒杀</p>
          </li>
          <li>
            <img src={require("../../assets/image/top.png")} alt="" />
            <p>畅销商品</p>
          </li>
          <li>
            <img src={require("../../assets/image/brand.png")} alt="" />
            <p>品质大牌</p>
          </li>
          <li>
            <img src={require("../../assets/image/selfsupport.png")} alt="" />
            <p>小U自营</p>
          </li>
          <li>
            <img src={require("../../assets/image/integral.png")} alt="" />
            <p>积分商城</p>
          </li>
        </ul>
        <div className="super_spike">
          <div className="su_sp_title">
            超级秒杀 <span>{this.state.hh}</span>:<span>{this.state.mm}</span>:
            <span>{this.state.ss}</span>
          </div>
          <div className="su_sp_goods">
            <img
              src={require("../../assets/image/piccommodity01.png")}
              alt=""
            />
            <div>
              这是一个洗面奶
              <div>
                ￥29.99<del>￥69.9</del>
              </div>
            </div>
          </div>
        </div>
        <div className="limit_spike">
          <div className="limit_sp_title">
            <button>限时秒杀</button>
            信任特价专区<span>（限量供应，先到先得）</span>
          </div>
          <div className="scro">
            <ul>
              {this.state.sk_goods.map((item, index) => {
                return (
                  <li key={index}>
                    <img src={this.$url + item.img} alt="" />
                    <div className="new_vip_price">
                      <div>
                        ￥{item.price}
                        <br />
                        <del>￥{item.market_price}</del>
                      </div>
                      <button>
                        <ShoppingCartOutlined />
                      </button>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
        <div>
          <Tabs defaultActiveKey="1" centered>
            <TabPane tab="Tab 1" key="1">
              <ul className="goods_list">
                {this.state.li1.map((item, index) => {
                  return (
                    <li key={index}>
                      <img
                        src={this.$url+item.img}
                        alt=""
                      />
                      <div className="goods_info">
                        <p className="goods_title">{item.goodsname}</p>
                        <p>{item.description}</p>
                        <div>
                          <p className="goods_price">
                            <span>￥{item.price}</span>
                            <br />
                            <del>￥{item.market_price}</del>
                          </p>
                          <button className="add_cars">加入购入车</button>
                        </div>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </TabPane>
            <TabPane tab="Tab 2" key="2">
            <ul className="goods_list">
                {this.state.li2.map((item, index) => {
                  return (
                    <li key={index}>
                      <img
                        src={this.$url+item.img}
                        alt=""
                      />
                      <div className="goods_info">
                        <p className="goods_title">{item.goodsname}</p>
                        <p>{item.description}</p>
                        <div>
                          <p className="goods_price">
                            <span>￥{item.price}</span>
                            <br />
                            <del>￥{item.market_price}</del>
                          </p>
                          <button className="add_cars">加入购入车</button>
                        </div>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </TabPane>
            <TabPane tab="Tab 3" key="3">
            <ul className="goods_list">
                {this.state.li3.map((item, index) => {
                  return (
                    <li key={index}>
                      <img
                        src={this.$url+item.img}
                        alt=""
                      />
                      <div className="goods_info">
                        <p className="goods_title">{item.goodsname}</p>
                        <p>{item.description}</p>
                        <div>
                          <p className="goods_price">
                            <span>￥{item.price}</span>
                            <br />
                            <del>￥{item.market_price}</del>
                          </p>
                          <button className="add_cars">加入购入车</button>
                        </div>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </TabPane>
            <TabPane tab="Tab 4" key="4">
            <ul className="goods_list">
                {this.state.li4.map((item, index) => {
                  return (
                    <li key={index}>
                      <img
                        src={this.$url+item.img}
                        alt=""
                      />
                      <div className="goods_info">
                        <p className="goods_title">{item.goodsname}</p>
                        <p>{item.description}</p>
                        <div>
                          <p className="goods_price">
                            <span>￥{item.price}</span>
                            <br />
                            <del>￥{item.market_price}</del>
                          </p>
                          <button className="add_cars">加入购入车</button>
                        </div>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </TabPane>
          </Tabs>
        </div>
      </>
    );
  }
}
